<template id="chose_add">
    <div class="chose_one">
        <div class="chose_add_top">
            <img src="../image/blue_da.png" alt="" @click="get_tui()">
            <h4>选择收货地址</h4>
            <span style="display:none">新增地址</span>
        </div>

        <div class="chose_add_container">
            <img src="../image/block_s.jpg" alt="" id="im_gmm">
              <div class="chose_add_first">
                  <!--style=" border-right:0.01rem solid #cccccc;"-->
                  <select name="" id="sel_add" >
                      <option v-for="lis_k in my_city">{{lis_k}}</option>
                      <!--<option>2</option>
                      <option>3</option>-->
                  </select>
                  <input type="text" placeholder="搜索支持配送的小区，写字楼" class="chose_input" v-model="blank" v-on:input="get_input(blank)">
                  <img src="../image/fa.jpg" alt="" class="img_kl">
              </div>
        </div>

        <div class="chose_add_two">
            <ul class="chose_add_two_u">
                <li v-for="search in my_search"><img src="../image/biao.jpg" alt="">{{my_search}}</li>
              <!--  <li><img src="../image/biao.jpg" alt="">展博商务广场</li>-->
            </ul>
            <p class="chose_add_two_p">清空历史记录</p>
        </div>

    </div>
</template>
<script>


    export default{
        name: 'chose_add',
        components:{
        },
        data(){
            return{
                //请求接口参数
                my_can:2,
                //我的地址
                my_city:[],
                //input 空变量
                blank:'',
                //搜索记录数据
                my_search:[],
            }
        },

        mounted:function(){
                 let h=$(window).height();
                 $('.chose_one').height(h);
                 //地址请求接口
            //地址的接口
            this.$http.jsonp(
                this.GLOBAL.BaseUrl+'/mobile/api/v1/Position.php?mode=getDispatchCity',
                {
                    params: {
                        type:this.my_can,
                    },
                    jsonp:'callback'
                }
            ).then(function (res) {
                if(res.body.code==200){
                    this.my_city=res.body.data.city;
                }
            });

        },
        methods: {
            get_tui:function(){
                window.history.go(-1);
            },
            //搜索记录
            get_input:function(ip){
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Position.php?mode=getPositionSearch',
                    {
                        params: {
                            //type:this.my_can,
                        },
                        jsonp:'callback'
                    }
                ).then(function (res) {
                    if(res.body.code==200){
                        this.my_search=res.body.data.city;
                    }
                });
            },
        }
    };

</script>
<style>
    .chose_add_two_p{
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        color:#9c9c9c;
        font-size:0.22rem;
    }
    .chose_add_two_u li img{
        display:block;
        position:absolute;
       width:0.28rem;
        height:0.27rem;
        top:0.28rem;
        left:0.18rem;
    }
    .chose_add_two_u li{
     list-style:none;
        height:0.79rem;
        line-height:0.79rem;
        color:#a7a7a7;
        font-size:0.24rem;
        text-indent: 0.6rem;
        border-bottom:0.01rem solid #f5f4f2;
        position:relative;
    }
    .chose_add_two_u{
        width:100%;
        height:1.6rem;

    }
    .chose_add_two{
        width:100%;
        min-height:2.42rem;
        background:#ffffff;
    }
    /*two*/
    .img_kl{
        position:absolute;
        display:block;
        width:0.26rem;
        height:0.28rem;
        left:2rem;
        top:0.18rem;
    }
    .chose_input{
        float:left;
        display:block;
        width:4.23rem;
        height:0.63rem;
        border:0;
        outline: none;
        background:#f5f4f2;
        text-indent: 0.6rem;
    }
    #sel_add{
        width:1.78rem;
        height:0.63rem;
        border:0;
        background:#f5f4f2;
        outline: none;
        float:left;
      /*  padding-top:0.05rem;*/
        /*将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
    }
    .chose_add_first{
        width:6.05rem;
        height:0.63rem;
        background:#f5f4f2;
        margin:0 auto;
        border-radius:0.05rem;
        position:relative;
    }
    .chose_add_container{
        width:100%;
        height: 0.9rem;
        padding-top:0.3rem;
        background:#ffffff;
        margin-bottom:0.01rem;
        position:relative;
    }
    #im_gmm{
        display:block;
        position:absolute;
        width:0.25rem;
        height:0.17rem;
        top: 0.5rem;
        left: 1.5rem;
        z-index: 5;
    }
    /*1*/
    .chose_add_top{
        height:0.74rem;
        width:100%;
      /*  border-bottom:1px solid #f0f0f0;*/
        position:relative;
        background:#ffffff;
        margin-bottom:0.01rem;
    }
    .chose_add_top img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .chose_add_top h4{
        height:0.74rem;
        color:#2eaffc;
        font-size:0.3rem;
        line-height:0.74rem;
        text-align:center;
        font-weight:normal;
    }
    .chose_add_top span{
        display:block;
        height:0.74rem;
        line-height: 0.74rem;
        font-size:0.26rem;
        color:#2eaffc;
        position:absolute;
        right:0.24rem;
        top:0;
    }

    .chose_one{
        background:#f5f4f2;
    }
</style>